<template>
  <div id="manage">
    <el-table
    :data="shareData"
    empty-text="暂时还没任何数据哦"
    stripe
    border
  >
    <el-table-column
    label="文章标题"
    align="center"
    >
      <template #default="scope">
        <el-input v-model="scope.row.title"></el-input>
      </template>
    </el-table-column>
    <el-table-column
    label="文章描述"
    align="center">
      <template #default="scope">
        <el-input v-model="scope.row.des" type="textarea"></el-input>
      </template>
    </el-table-column>
    <el-table-column
      label="作者"
      align="center"
      prop="author.name"
    >
    </el-table-column>
    <el-table-column
      label="封面图"
      align="center"
      id="imgs"
    >
      <template #default='scope'>
        <el-image
          v-for="item in scope.row.cover"
          style="width: 50px; height: 50px"  
          :src="baseURL+item"  
          lazy   
        >
          <!-- 加载失败 -->
          <template #error>
            <div class="image-slot">
              <i class="iconfont icon-bianzu"></i>
              加载失败
            </div>
          </template>
          <!-- 加载之前 -->
          <template #placeholder>
            <div class="error">
              <el-icon class="is-loading">
                <i class="iconfont icon-zhengzaijiazai" style="font-size='17px'"></i>
              </el-icon>
              正在加载
            </div>
          </template>
      </el-image>
      </template>
    </el-table-column>
    <el-table-column
      label="重新上传md文件"
    >
      <template #default="scope">
          <el-upload
          class="upload-demo"
          :action="baseURL+'/admin/share/update/md'"
          :limit="1"
          :data="scope.row"
          :with-credentials="true"
          :on-change="fileChange"
          list-type='text'
          ref="updateMd"
          :on-success="suceessMd" 
          >
          <template #trigger>
            <el-button size="small" type="primary">自动上传</el-button>
          </template>
          自动上传并且会将旧文件删除
          </el-upload>
        </template>
    </el-table-column>
    <el-table-column
      label="重新上传cover"
      align="center"
      >
        <template #default="scope">
          <el-upload
          class="upload-demo"
          :action="baseURL+'/admin/share/update/cover'"
          :limit="3"
          :data="scope.row"
          :with-credentials="true" 
          list-type='text'
          :before-upload="coverChange"
          multiple
          ref="updateCover"
          :on-success="suceessCover" 
          >
          <el-button size="small" type="primary">自动上传</el-button>
          </el-upload>
        </template>
    </el-table-column>
    <el-table-column
      label="操作"
      align="center"
      >
        <template #default="scope">
          <el-popover placement="top" :width="160" v-model:visible="scope.row.visible">
          <p>确认保存修改的内容吗？</p>
          <div style="text-align: right; margin: 0">
            <el-button size="mini" type="text" @click="scope.row.visible = false">取消</el-button>
            <el-button type="primary" size="mini" @click="updateShareData(scope.row)">确定</el-button>
          </div>
          <template #reference>
            <el-button type="primary" icon="el-icon-edit" circle ></el-button>
          </template>
          </el-popover>
          <el-button type="danger" icon="el-icon-delete" circle @click="open(scope.row)"></el-button>
        </template>
      </el-table-column>
      <el-table-column
      label="发表时间"
      align="center"
      >
      <template #default="scope">
        {{conversionDate(scope.row.date)}}
      </template>
      </el-table-column>
      <el-table-column
      label="上次修改时间"
      align="center"
      >
      <template #default="scope">
        {{conversionDate(scope.row.mtime)}}
      </template>
      </el-table-column>
  </el-table>
  </div>
</template>
 
<script>
export default {
  name: '',
  data(){
    return{
      shareData:[]
    }
  },
  methods:{
    // 获取分享文章
    async getShareData(){
      let {data} = await this.$axios.get("/admin/share/getAll")
      if(data.code) return this.$message.warning(data.mes)
      let d = data.data
      d.forEach(item=>{
        item.visible = false
      })
      this.shareData = d
    },
    // 日期转化
    conversionDate(date){
      let time = new Date(date)
      let y = time.getFullYear()
      let month = time.getMonth()+1<10?"0"+( time.getMonth()+1): time.getMonth()+1
      let day = time.getDate()<10?"0"+time.getDate():time.getDate()
      let h = time.getHours()<10?"0"+time.getHours():time.getHours()
      let f = time.getMinutes()<10?"0"+time.getMinutes():time.getMinutes()
      let s = time.getSeconds()<10?"0"+time.getSeconds():time.getSeconds()
      return `${y}-${month}-${day} ${h}:${f}:${s}`
    },
     // 上传文件状态改变时的判断
    fileChange(file,fileList){
      // 判断状态
      if(file.status!=="ready") return
      // 判断是否md文件
      if(/^(.+)\.md$/.test(file.name)){

      }else{
        this.$message.warning("只能上传 .md 文件")
        fileList.pop()
      }
    },
    // md文件修改成功
    suceessMd(res,file){
      if(res.code) return this.$message.warning(res.mes)
      this.$message.success(res.mes)
      this.$refs.updateMd.clearFiles()
      // 更新数据
      this.getShareData()
    },
    // 上传封面图时触发
    coverChange(file,fileList){
     const isJPG = /^image\/(jpeg|png)$/.test(file.type);
      const isLt2M = file.size / 1024 / 1024 < 1;

      if (!isJPG) {
        this.$message.warning('上传头像图片只能是 JPG/PNG 格式!');
      }
      if (!isLt2M) {
        this.$message.warning('上传头像图片大小不能超过 1MB!');
      }
      return isJPG && isLt2M
    },
    // cover修改成功
    suceessCover(res,file){
      if(res.code){
        return this.$message.warning(res.mes)
      }
      this.$message.success(res.mes)
      // 更新数据
      this.getShareData()
      // 清空上传
      // this.$refs.updateCover.clearFiles()
    },
    // 删除日志提示
    open(item) {
      this.$confirm('此操作将永久删除该日志, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
      .then(() => {
        this.deleteShare(item)
      })
      .catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除',
        })
      })
    },
    // 删除成功
    async deleteShare(item){
      let {data} = await this.$axios.post("/admin/share/delete",{
        _id:item._id
      })
      if(data.code) return this.$message.warning(data.mes)
      this.$message.success(data.mes)
      // 更新数据
      this.getShareData()
    },
    // 修改文字列表 
    async updateShareData(item){
      let {data} = await this.$axios.post("/admin/share/update/updateTit",{
        title:item.title,
        des:item.des,
        _id:item._id
      })
      if(data.code) return this.$message.warning(data.mes)
      this.$message.success(data.mes)
      // 更新数据
      this.getShareData()
      item.visible = false
    }
  },
  created(){
    // 获取分享文章
    this.getShareData()
  }
}
</script>

<style scoped lang='less'>
#manage{
  .image-slot,.error{
    font-size: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    color: #999;
    i{
      font-size: 17px;
    }
  }
}
</style>